
import {createApp, customRef} from 'vue'
// import emitter from "@/utils/emitter";
// import App from './App.vue'
// import App from '@/vueTest/HooksApp.vue'
// import App from '@/vueTest/PiniaApp.vue'
// import App from '@/vueTest/c/01_props/Father.vue'
// import App from '@/vueTest/c/02_custom-event/Father.vue'
// import App from '@/vueTest/c/03_mitt/Father.vue'
// import App from '@/vueTest/c/04_v-model/Father.vue'
// import App from '@/vueTest/c/05_$attrs/Father.vue'
// import App from '@/vueTest/c/06_$refs-$parent/Father.vue'
// import App from '@/vueTest/c/07_provide-inject/Father.vue'
// import App from '@/vueTest/c/09_slot_默认插槽/Father.vue'
// import App from '@/vueTest/c/09_slot_具名插槽/Father.vue'
import App from '@/vueTest/c/09_slot_作用域插槽/Father.vue'

const app = createApp(App)

import {createPinia} from 'pinia'
app.use(createPinia())
app.mount('#app')

/*
other api
shallowRef:创建一个响应式数据，但只对顶层属性响应式处理
shallowReactive:创建一个浅层响应式对象，只对顶层属性响应式

readonly:创建一个对象的深只读副本
shallowReadonly: 浅层次只读，深层次可以修改

toRaw():返回一个响应式数据的原始数据，返回值不具有响应式，不会触发视图更新
markRaw:标记一个对象，使其永远不会变成响应式的

customRef：创建一个自定义的ref，并对其依赖项跟踪和更新触发进行逻辑控制

teleport:一种能够将我们组件html结构移动到指定位置的技术

Suspense
 */
let initVal = 'abc'
let msg = customRef((track, trigger)=>{
    return {
        // msg被读取时调用
        get(){
            track() //告诉Vue需要对msg持续关注，一旦msg变化就去更新
            return initVal
        },
        // msg被修改时调用
        set(value){
            console.log('set', value)
            initVal = value
            trigger() // 通知vue数据变化了
        }
    }
})